<template>
	<view class="zh-wrapper">
		<scroll-view class="menus" :scroll-into-view="menuScrollIntoView" scroll-with-animation scroll-y>
			<view class="wrapper">
				<view class="menu" :id="`menu-${item.id}`" :class="{'current': item.id == curCateId}"
					v-for="(item, index) in goods" :key="index" @tap="handleMenuTap(item.id)">
					<text>{{ item.name }}</text>
				</view>
			</view>
		</scroll-view>
		<scroll-view class="goods" scroll-with-animation scroll-y :scroll-top="cateScrollTop"
			@scroll="handleGoodsScroll">
			<view class="wrapper">
				<view class="list">
					<!-- category begin -->
					<view class="category" v-for="(item, index) in goods" :key="index" :id="`cate-${item.id}`">
						<slot name="custom" :data="item">
							<view class="title">
								<text>{{ item.name }}</text>
								<image :src="item.icon" class="icon"></image>
							</view>
							<view class="items">
								<!-- 商品 begin -->
								<view class="good" v-for="(good, key) in item.goods_list" :key="key">
										<image :src="good.images" class="image"></image>
										<view class="right">
											<text class="name">{{ good.name }}</text>
											<text class="tips">{{ good.content }}</text>
										</view>
								</view>
								<!-- 商品 end -->
							</view>
						</slot>
					</view>
					
					<!-- category end -->
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref, nextTick, getCurrentInstance, watch } from "vue";
	import { ICateItem } from "./interface";
	const props = defineProps<{
		scrollList: ICateItem[]
	}>()
	const instance = getCurrentInstance();
	const menuScrollIntoView = ref("");
	const curCateId = ref(6905);
	const cateScrollTop = ref(0);
	// 计算高度状态
	const sizeCalcState = ref(false);
	const goods = ref<ICateItem[]>([]);
	
	watch(
		() => props.scrollList,
		newVal => {
			goods.value = newVal;
			nextTick(() => {
				if (newVal && newVal.length > 0) {
					calcSize();
				}
			})
		},
		{
			immediate: true,
			deep: true
		}
	)

	// 点击左侧菜单
	function handleMenuTap(id: number) {
		if (!sizeCalcState.value) {
			calcSize()
		}

		curCateId.value = id
			
		nextTick(() => {
			cateScrollTop.value = goods.value.find(item => item.id == id).top
		})
	}
	
	// 
	function handleGoodsScroll({ detail }) {
		if(!sizeCalcState.value) {
			calcSize()
		}
		const { scrollTop } = detail
		// 此处scrollTop + 1为了处理scrolltop的偏差值
		let tabs = goods.value.filter(item=> item.top <= (scrollTop + 1)).reverse()
		if(tabs.length > 0){
			curCateId.value = tabs[0].id
		}
	}

	function calcSize() {
		let h = 10

		goods.value.forEach(item => {
			let view = uni.createSelectorQuery().in(instance).select(`#cate-${item.id}`)
			view.fields({
				size: true
			}, (data: any) => {
				item.top = h
				h += data.height
				item.bottom = h
			}).exec()
		})
		sizeCalcState.value = true
	}
</script>

<style lang="scss">
	$text-color-assist: #919293; // 辅助色
	$text-color-base: #5A5B5C; // 基础色
	page {
		height: 100%;
	}
	.zh-wrapper {
		height: 100%;
		overflow: hidden;
		width: 100%;
		display: flex;

		.menus {
			width: 200rpx;
			height: 100%;
			overflow: hidden;
			background-color: $uni-bg-color-grey;

			.wrapper {
				width: 100%;
				height: 100%;

				.menu {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					padding: 30rpx 20rpx;
					font-size: 26rpx;
					color: $text-color-assist;
					position: relative;

					&:nth-last-child(1) {
						margin-bottom: 130rpx;
					}

					&.current {
						background-color: skyblue;
						color: $text-color-base;
					}

					.dot {
						position: absolute;
						width: 34rpx;
						height: 34rpx;
						line-height: 34rpx;
						font-size: 22rpx;
						background-color: $uni-color-primary;
						color: #ffffff;
						top: 16rpx;
						right: 10rpx;
						border-radius: 100%;
						text-align: center;
					}
				}
			}
		}

		.goods {
			flex: 1;
			height: 100%;
			overflow: hidden;
			background-color: #ffffff;

			.wrapper {
				width: 100%;
				height: 100%;
				padding: 20rpx;

				.list {
					width: 100%;
					font-size: $uni-font-size-base;
					padding-bottom: 130rpx;

					:deep(.category) {
						width: 100%;

						.title {
							padding: 30rpx 0;
							display: flex;
							align-items: center;
							color: $text-color-base;

							.icon {
								width: 38rpx;
								height: 38rpx;
								margin-left: 10rpx;
							}
						}
					}

					:deep(.items) {
						display: flex;
						flex-direction: column;
						padding-bottom: -30rpx;

						.good {
							display: flex;
							align-items: center;
							margin-bottom: 30rpx;

							.image {
								width: 160rpx;
								height: 160rpx;
								margin-right: 20rpx;
								border-radius: 8rpx;
							}

							.right {
								flex: 1;
								height: 160rpx;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								align-items: flex-start;
								justify-content: space-between;
								padding-right: 14rpx;

								.name {
									font-size: $uni-font-size-base;
									margin-bottom: 10rpx;
								}

								.tips {
									width: 100%;
									height: 40rpx;
									line-height: 40rpx;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									font-size: $uni-font-size-sm;
									color: $text-color-assist;
									margin-bottom: 10rpx;
								}

								.price_and_action {
									width: 100%;
									display: flex;
									justify-content: space-between;
									align-items: center;

									.price {
										font-size: $uni-font-size-base;
										font-weight: 600;
									}

									.btn-group {
										display: flex;
										justify-content: space-between;
										align-items: center;
										position: relative;

										.btn {
											padding: 0 20rpx;
											box-sizing: border-box;
											font-size: $uni-font-size-sm;
											height: 44rpx;
											line-height: 44rpx;

											&.property_btn {
												border-radius: 24rpx;
											}

											&.add_btn,
											&.reduce_btn {
												padding: 0;
												width: 44rpx;
												border-radius: 44rpx;
											}
										}

										.dot {
											position: absolute;
											background-color: #ffffff;
											border: 1px solid $uni-color-primary;
											color: $uni-color-primary;
											font-size: $uni-font-size-sm;
											width: 36rpx;
											height: 36rpx;
											line-height: 36rpx;
											text-align: center;
											border-radius: 100%;
											right: -12rpx;
											top: -10rpx;
										}

										.number {
											width: 44rpx;
											height: 44rpx;
											line-height: 44rpx;
											text-align: center;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>